<template>
  <div style="text-align:center">
    <div ref="main" style="width:70%;height:500px"></div>
  </div>
</template>
<script setup>
// 使用echarts渲染页面：显示柱形图
//1、项目中安装echarts的依赖: npm i echarts --save
//2、在js中引入echarts模块
//3、echarts根据配置渲染图形到页面标签内
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'
import { GetOrderStatistics } from '@/api/orderStatistics'
//定义一个响应式对象用来绑定页面中的一个标签
let main = ref(null)
onMounted(async () => {
  //查询数据
  const { data } = await GetOrderStatistics('2023-05-01', '2023-07-01')
  //等vue加载完页面以后，查找main标签，让echarts渲染柱形图到main标签内展示
  var myChart = echarts.init(main.value) //main.value代表渲染柱形图的标签
  var option

  option = {
    title: {
      text: '尚品甄选订单统计数据',
      subtext: '每日订单总金额',
    },
    xAxis: {
      type: 'category',
      data: data.dateList,
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: data.totalAmountList,
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)',
        },
      },
    ],
  }

  option && myChart.setOption(option)
})
</script>
